參考出處 JS 30

參考出處 Alex 宅幹嘛

今天要來做的是：利用 原生CSS 變數去改變 CSS 及 JS 的值來達到效果。

因為鐵人賽‘剩下的天數也不夠 30 天，所以 JS 30 的例子不能全部做，目前會挑我覺得有興趣的來做。

用原生 CSS 變數來改變 CSS 來做效果，好像不是大家都會這樣做，但是可以確定的是滿方便的。

定義變數

CSS Variables 的變數定義必須定義在 CSS 選取器內，大多數來說會建議定義在 :root 最高層級的選取器便於取用。

:root {
    --size: 200px;
}

取值方式

設定 CSS Variables 與設定一般 CSS 屬性方式是相同的，先選取 document.documentElement.root 就能在下方的 style 設定屬性 { '--變數名稱', '值' }。

document.documentElement.style.setProperty('--<varName>', '<varValue>')

const root = document.documentElement;
root.style.setProperty('--size', `${this.value}px`)

實作

範例

先從變數設定起來

CSS

:root {
      --spacing: 10px;
      --blur: 10px;
      --base: #ffc600;
    }
img {
      padding: var(--spacing);
      filter: blur(var(--blur));
      background: var(--base);
    }
.hl {
      color: var(--base);
    }

:root 也可以寫成 html，是一樣的意思

如果我們想要選取 :root

可以寫成 document.querySelector(':root')
上面這行跟 document.documentElement 是一樣的。

JavaScript

const inputs = document.querySelectorAll('.controls input')

function changeHandler(){
  document.documentElement.style.setProperty('--'+ this.name,this.value + (this.dataset.sizing ||'' ))
}

inputs.forEach(function(input){
  input.addEventListener('change',changeHandler)
  input.addEventListener('mouseover',changeHandler)
})

把 function 這段拿出來說明一下

(this.dataset.sizing ||'' ))

因為在 HTML 的 spacing 和 blur 有給 data-sizing 的屬性，所以我們這裡下，如果有 sizing 我們就用，如果沒有我們就給他空值，這樣 color 就不會改變 px。

以上，明天見